<template>
  <div>
   <!--    -->
   <van-row type="flex" justify="space-around">
      <van-col
      span="11"
      v-for="item in cardList"
      :key="item.id"
      >
        <div id="card">
          <img :src="`http://liufusong.top:8080${item.imgSrc}`" alt="">
          <div class="left">
            <p>{{item.title}}</p>
            <p>{{item.desc}}</p>
          </div>
        </div>
      </van-col>

    </van-row>
  </div>
</template>

<script>
import { getGroupsApi } from '@/api'
export default {
  data () {
    return {
      cardList: []
    }
  },
  async created () {
    const res = await getGroupsApi()
    this.cardList = res.data.body
    // console.log(res)
  }
}
</script>

<style lang="less" scoped>

#card{
  display: flex;
  background-color: #fff;
  margin-bottom: 10px;
  justify-content: center;
   img{
    margin-top: 10px;
     width: 50px;
     height: 50px;
   }
}
</style>
